<template>
  <div class="qs-container">
    <el-row type="flex" class="title-css">
      <el-col v-if="qsItem.type === 2">
        <div>
          {{ "选择题" }}
        </div>
      </el-col>
      <el-col v-else-if="qsItem.type === 3">
        <div>
          {{ "填空题" }}
        </div>
      </el-col>
      <el-col v-else-if="qsItem.type === 4">
        <div>
          {{ "判断题" }}
        </div>
      </el-col>
      <el-col v-else-if="qsItem.type === 5">
        <div>
          {{ "简答题" }}
        </div>
      </el-col>
    </el-row>
    <el-row type="flex">
      <div>{{ qsItem.title }}</div>
    </el-row>
    <div class="anster-css">
      <el-row type="flex">
        <div class="item-box" v-if="qsItem.type === 2">
          <el-radio
            class="choose"
            v-for="(selections, index) in qsItem.qt_body.selections"
            :key="index"
            :index="index"
            :label="index"
            style="display: block"
            >{{ selections }}
          </el-radio>
          <div class="answer">
            <div
              v-for="(answers, index) in qsItem.qt_body.answers"
              :key="index"
              :index="index"
              :label="index"
              style="display: block"
              >答案：{{ answers }}
            </div>
          </div>
        </div>

        <div class="item-box" v-if="qsItem.type === 3">
          <div class="tinakong">答案：{{ qsItem.qt_body.answers }}</div>
        </div>
        <div class="item-box" v-if="qsItem.type === 4">
          <el-radio>{{ qsItem.qt_body.answers }} </el-radio>
        </div>
        <div class="item-box" v-if="qsItem.type === 5">
          <div>答案：{{ qsItem.qt_body.answers }}</div>
        </div>
      </el-row>
    </div>
    <div class="delect">
    <el-button @click="deleteSign">删除</el-button>
  </div>
  </div>
  
</template>
<script>
export default {
  name: "qsItem",
  props: {
    qsItem: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  methods: {
    deleteSign() {
      this.$emit("deleteSign", this.qsItem);
    },
  },
};
</script>

<style scoped>
.qs-container {
  margin: 30px auto;
  width: 70%;
  /* //height: 100px;
//background-color: #d5eb87; */
  border-top: 2px solid;
  padding-left: 10px;
}

.anster-css {
  text-align: left;
  margin-top: 15px;
}
.title-css {
  font-weight: bolder;
  text-align: left;
  margin-bottom: 15px;
}

.answer {
  margin-top: 10px;
}

.delect {
  text-align: right;
}
</style>